<script setup>
import { ref } from "vue";
</script>

<template>
  <div class="header">
    <RouterLink
      to="/home"
      custom
      v-slot="{ isActive, navigate }">
      <div
        :class="{ active: isActive }"
        @click="navigate">
        <el-icon>
          <HomeFilled></HomeFilled>
        </el-icon>
        网站收藏
      </div>
    </RouterLink>
    <RouterLink
      to="/imageGallery"
      custom
      v-slot="{ isActive, navigate }">
      <div
        :class="{ active: isActive }"
        @click="navigate">
        <el-icon><Files /></el-icon>
        图片收藏
      </div>
    </RouterLink>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  background-color: #1e90ff;
  > div {
    padding-left: 10px;
    padding-right: 20px;
    color: #ccc;
    line-height: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &.active {
      color: #fff;
    }
    i {
      margin-right: 5px;
    }
  }
}
</style>
